<!--下边的按钮，点击弹出窗口 -->
<template>
  <div class="footer-btn" :style="{bottom:btnBottom,left:btnLeft}" @click="closeFootBox">
    <Icon v-if="display==true" type="ios-arrow-down" />
    <Icon v-if="display==false" type="ios-arrow-up" />
  </div>
</template>
<script>
export default {
  props:{
    boxHeight:{
      type: String,
      default:'0px'
    },
    boxWidth: {
      type: String,
      default: '0px'
    },
    display:{
      type: Boolean,
      default: false
    }
  },
  watch:{
    boxWidth(){
      //console.log("boxWidth(): %o",this.boxWidth);
      let leng=this.boxWidth.length;
      if (this.boxWidth.substring(leng-1,leng)=="x"){
        this.btnLeft = this.boxWidth.substring(0,leng-2) * 0.5 + "px";
      }else if (this.boxWidth.substring(leng-1,leng)=="%"){
        this.btnLeft = this.boxWidth.substring(0,leng-1) * 0.5 + "%";
      }
      //console.log("btnLeft: %o",this.btnLeft);
     }
  },
  data(){
    return{
      btnBottom: "0px",
      btnLeft: '0px',
      icon: 'ios-arrow-down',
    }
  },
  methods:{
    closeFootBox() {
      this.display = !this.display;
      if (this.display==true){
        this.btnBottom=this.boxHeight;
      }else{
        this.btnBottom='0px';
      }
      this.$emit('display', this.display);
    }
  }

}
</script>
<style lang="less" scoped>
/*footer-btn*/
.footer-btn {
  //display: -webkit-box;
  //display: -ms-flexbox;
  display: flex;
  //-webkit-box-orient: horizontal;
  //-webkit-box-direction: normal;
  flex-flow: row;
  position: absolute;
  left: 50%;
  bottom: 0;
  padding: 0 30px;
  height: 30px;
  //-webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: rgba(25, 49, 122, 0.8);
  z-index: 2;
  cursor: pointer;
  color: #ffffff;

/*  opacity: 1;
  transition: opacity 0.5s;*/
}
.footer-btn::before {
  left: -110px;
  border-right-color: rgba(25, 49, 122, 0.8) !important;
  border-right-width: 80px !important;
}
.footer-btn::after {
  right: -110px;
  border-left-color: rgba(25, 49, 122, 0.8) !important;
  border-left-width: 80px !important;
}
.footer-btn::before, .footer-btn::after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  border: 30px solid transparent;
  position: absolute;
  bottom: -30px;
  pointer-events: none;
  box-sizing: border-box;
}
/**:before, *:after {
  //-webkit-box-sizing: border-box !important;
  box-sizing: border-box;
}*/
</style>
